<template>
  <HModal :visible="visible" title="权限条件控制" :height="600"
          @cancel="close" @ok="handleOK" :width="740">
    <div class="field-action-formula-item" v-for="item in dataSource">
      <div class="buttons-container">
        <div class="button" @click="addNew" style="margin-bottom: 25px"><span><a-icon type="plus"/></span></div>
        <div class="button" @click="() => remove(item)"><span><a-icon type="minus"/></span></div>
      </div>
      <RowAttribute style="flex: 0.5" :label-width="labelWidth" label="如果">
        <FormulaTextAreaConfig
          style="flex: 0.5"
          :formDefinition="formDefinition"
          :variableContainerConfig="variableContainerConfig"
          v-model="item.ifFormula" :title="item.ifFormulaTitle"
          @update:title="t => item.ifFormulaTitle = t"/>
      </RowAttribute>

      <RowAttribute style="flex: 0.5" :label-width="labelWidth" label="则为">
        <FieldActionFormulaPropertyConfig :fieldAction="item" :actionLabel="actionLabel"/>
      </RowAttribute>
    </div>
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue';
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue';
import {createProps, guid} from '@/utils';
import {createFormulaGroup} from '@comp/hhd/design/FormDesigner/types';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import FieldActionFormulaPropertyConfig from '@comp/hhd/design/FormAction/FieldActionFormulaPropertyConfig.vue';
import {AuthType} from '@comp/hhd/design/Constants';

export default {
  name: 'FieldActionFormulaModal',
  components: {
    FieldActionFormulaPropertyConfig,
    FormulaTextAreaConfig,
    RowAttribute,
    HModal
  },
  props: {
    formDefinition: createProps(Object, () => undefined),
  },
  data() {
    return {
      actionLabel: undefined,
      visible: false,
      dataSource: [],
      labelWidth: '50px',
      fieldAction: {}
    };
  },
  methods: {
    setData(dataSource, fieldAction, title) {
      this.dataSource = [];
      this.actionLabel = fieldAction.actionTitle = title;
      this.dataSource = JSON.parse(JSON.stringify(dataSource));
      this.fieldAction = JSON.parse(JSON.stringify(fieldAction));
      if (!this.dataSource || !this.dataSource.length) {
        this.addNew();
      }
      this.open();
    },
    remove(item) {
      this.dataSource = this.dataSource.filter(i => i !== item);
      if (!this.dataSource || this.dataSource.length <= 0) {
        this.addNew();
      }
    },
    addNew() {
      let formula = createFormulaGroup();
      formula.auth = AuthType.edit;
      formula.required = false;
      formula.forAction = 'auth';
      formula.actionId = this.fieldAction.actionId;
      this.dataSource.push(formula);
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    handleOK() {
      let fieldFormulas = this.dataSource;
      if (fieldFormulas.length === 1 && !fieldFormulas[0].ifFormula) {
        fieldFormulas = [];
      }
      if (fieldFormulas && fieldFormulas.length > 1) {
        for (let i = 0; i < fieldFormulas.length; i++) {
          if (!fieldFormulas[i].ifFormula) {
            this.$message.warn('请配置公式');
            return;
          }
        }
      }
      let groupKey = guid();
      fieldFormulas.forEach(formula => {
        formula.fieldId = this.fieldAction.fieldId;
        formula.groupKey = groupKey;
      });
      this.$emit('ok', {
        fieldId: this.fieldAction.fieldId,
        fieldFormulas
      });
      this.close();
    },
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    },
  }
};
</script>
<style>
.field-action-formula-item {
  display: flex;
  align-items: start;
  padding-left: 50px;
}

.field-action-formula-item .buttons-container .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  color: white !important;
  background: #296fbe;
  cursor: pointer;
  margin-bottom: 25px;
  border-radius: 2px;
}
</style>